<template>
  <ElCard class="card art-custom-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">服务</span>
        <span class="subtitle">运行环境</span>
      </div>
    </template>
    <ElDescriptions :column="2" border>
      <ElDescriptionsItem label="名称">{{ data?.name || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="版本">{{ data?.version || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="启动时间">{{ data?.start_time || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="运行时长">{{ data?.run_time || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="内存总量">{{ data?.total || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="已用内存">{{ data?.used || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="剩余内存">{{ data?.free || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="使用率">{{ usage }}</ElDescriptionsItem>
      <ElDescriptionsItem label="安装路径">{{ data?.home || '-' }}</ElDescriptionsItem>
    </ElDescriptions>
  </ElCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ServerMonitorModel } from '@/api/system/server'
const props = defineProps<{ data: ServerMonitorModel['py'] | null | undefined }>()
const usage = computed(() => {
  const val = props.data?.usage
  if (val === undefined || val === null) return '-'
  return `${Number(val).toFixed(1)}%`
})
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-header .title {
  font-weight: 600;
}

.card-header .subtitle {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}
</style>